import React from 'react'
import styles from './index.module.scss'
import FileButton from '../../../../components/FileButton'

export default class FilterMore extends React.Component {
  state ={
    selectActive: this.props.activeSelect
  }
  // 渲染标签
  changeActive (val) {
    const newS = [...this.state.selectActive] // 重新建一个新数组，要不然会直接将父级的指向修改了
    // 判断当前选中数组有没有这个val
    if (newS.includes(val)) {
     const index = newS.indexOf(val)
     newS.splice(index, 1)
    } else {
      newS.push(val)
    }
    this.setState(_ => {
      return {
        selectActive: newS
      }
    })
  }
  renderFilters(data) { // 渲染span标签
    // 高亮类名： styles.tagActive
    const { selectActive } =this.state
    return (
      data.map(item => {
        return (
          <span key={item.value} 
          className={[styles.tag, selectActive.includes(item.value) ? styles.tagActive: ''].join(' ')}
          onClick={_ => this.changeActive(item.value)}
          >
            {item.label}
          </span>
        )
      })
      
    )
  }
  onCancel = () => { // 清除选择
    this.setState(_ => {
      return {
        selectActive: []
      }
    })
  }
  render () {
    const { data: {roomType,  oriented,  floor,  characteristic} } = this.props
    console.log(this.props.activeSelect)
    return (
      <>
        <div className={styles.more}>
            <div className={styles.tags}>
              <dl className={styles.dl}>
                <dt className={styles.dt}>户型</dt>
                <dd className={styles.dd}>{this.renderFilters(roomType)}</dd>

                <dt className={styles.dt}>朝向</dt>
                <dd className={styles.dd}>{this.renderFilters(oriented)}</dd>

                <dt className={styles.dt}>楼层</dt>
                <dd className={styles.dd}>{this.renderFilters(floor)}</dd>

                <dt className={styles.dt}>房屋亮点</dt>
                <dd className={styles.dd}>{this.renderFilters(characteristic)}</dd>
              </dl>
            </div>
            <div className={styles.footer}>
              <FileButton onCancel={this.onCancel} onSave={ _ => this.props.onSave(this.state.selectActive, this.props.openType)} conText='清除'/>
            </div>
        </div>
        <div className={styles.content} onClick={this.props.onCancel}/>
      </>
    )
  }
}